<template>
	<view class="page">
		<view class="block_1">
			<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
		</view>
		<view class="block_3">
			<scroll-view scroll-view :scroll-top="scrollTop" scroll-y="true" class="block_3_3">
				<!-- <view class="list_1">
					<view class="image-text_1-0">
						<image
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/3e57ebaf645d30343465baed9c640a3445b71a8c.png"
							class="icon_2-0"></image>
						<text lines="1" class="text-group_1-0">拼团规则</text>
					</view>
					<view class="image-text_1-1">
						<image
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/1e6a4ad5c85d5e13b679a21179dd893e4c7c592e.png"
							class="icon_2-1"></image>
						<text lines="1" class="text-group_1-1">拼团记录</text>
					</view>
					<view class="image-text_1-2">
						<image
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/b479d017cf80c0999eecb67277c7b11dc769827b.png"
							class="icon_2-2"></image>
						<text lines="1" class="text-group_1-2">待支付</text>
					</view>
				</view> -->
				<view class="image-text_2">
					<image
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/6cfcc24861699eea670775defb8be75688e974fd.png"
						class="label_1"></image>
					<text lines="1" decode="true" class="text-group_2">即&nbsp;将&nbsp;成&nbsp;团</text>
				</view>
				<!-- <scroll-view scroll-x>
					<view class="block_4">
						<view class="block_5" v-for="(item,index) in 6" :key="index">
							<view class="block_5_5">
								<image
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/43c336f0825cc7532e8db6674aa5781dfb728817.png"
									class="image_3"></image>
							</view>
							<view class="text-group_3">
								<text lines="1" class="text_2">新疆大红枣颗粒饱满1斤</text>
								<text lines="1" class="text_3">¥12.9起</text>
							</view>
							<view class="group_2">
								2023-10-20到期
								
							</view>
						</view>
					</view>
				</scroll-view> -->
				<view class="image-text_3">
					<image
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/6cfcc24861699eea670775defb8be75688e974fd.png"
						class="label_2"></image>
					<text lines="1" decode="true" class="text-group_5">拼&nbsp;团&nbsp;列&nbsp;表</text>
				</view>
				<!-- <view class="block_8" v-for="(item,index) in 6" :key="index">
					<view class="image-wrapper_2">
						<image
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/43c336f0825cc7532e8db6674aa5781dfb728817.png"
							class="image_5"></image>
					</view>
					<view class="block_9_9">
						<view class="block_9" >
							<text lines="1" class="paragraph_1">kira阴阳师cosplay系列第一代<br />跑鞋</text>
							<view class="image-text_4">
								<image
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/08c2a539cdf6fa3aa0c6d12edff322c14766ff6d.png"
									class="icon_3"></image>
								<text lines="1" class="text-group_6">体鱼大平台</text>
							</view>
							<view class="section_1">
								<view class="group_3">
									<view class="group_4">
										2023-10-20到期
									</view>
									<view class="text-wrapper_9">
										<text lines="1" class="text_22">￥</text>
										<text lines="1" class="text_23">59.00</text>
									</view>
								</view>
								<view class="button_1" @click="immediately">
									<text lines="1" class="text_26">立即拼团</text>
								</view>
							</view>
						</view>
					</view>
				</view> -->
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	export default {
		components: {
			QSNavbar
		},
		data() {
			return {
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "拼团",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
			};
		},
		methods: {
			immediately(){
				uni.navigateTo({
					url:'./collage_details'
				})
			}
		},
	};
</script>
<style lang="less" scoped>
	.page {
		position: relative;
		width: 750rpx;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.block_1 {
		width: 750rpx;
		height: 459rpx;
		background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/3c1299e42077eeebef70ab5949be643fd07fc959.png') 100% no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.block_3_3 {
		height: 75vh;
		overflow: auto;
	}

	.block_3 {
		position: fixed;
		left: 0rpx;
		width: 750rpx;
		top: 430rpx;
		z-index: 999;
		height: 74%;
		// background: url('https://lanhu.oss-cn-beijing.aliyuncs.com/psseaoxymr4z6k25ub2s74voqydycfst4i1e76bba2-78c5-4649-9c85-30f41edc77d5') 0rpx 0rpx no-repeat;
		// background-size: 750rpx 2324rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
	}

	.list_1 {
		width: 515rpx;
		height: 128rpx;
		flex-direction: row;
		display: flex;
		margin: 40rpx 0 0 117rpx;
	}

	.image-text_1-0 {
		width: 99rpx;
		height: 128rpx;
		margin-right: 107rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.icon_2-0 {
		width: 85rpx;
		height: 85rpx;
		margin-left: 6rpx;
	}

	.text-group_1-0 {
		width: 101rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(50, 50, 50, 1);
		font-size: 24rpx;
		font-family: MicrosoftYaHeiLight;
		font-weight: 300;
		text-align: left;
		white-space: nowrap;
		line-height: 33rpx;
		margin-top: 19rpx;
	}

	.image-text_1-1 {
		width: 99rpx;
		height: 128rpx;
		margin-right: 107rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.icon_2-1 {
		width: 85rpx;
		height: 85rpx;
		margin-left: 6rpx;
	}

	.text-group_1-1 {
		width: 101rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(50, 50, 50, 1);
		font-size: 24rpx;
		font-family: MicrosoftYaHeiLight;
		font-weight: 300;
		text-align: left;
		white-space: nowrap;
		line-height: 33rpx;
		margin-top: 19rpx;
	}

	.image-text_1-2 {
		width: 99rpx;
		height: 128rpx;
		margin-right: 107rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.icon_2-2 {
		width: 85rpx;
		height: 85rpx;
		margin-left: 6rpx;
	}

	.text-group_1-2 {
		width: 101rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(50, 50, 50, 1);
		font-size: 24rpx;
		font-family: MicrosoftYaHeiLight;
		font-weight: 300;
		text-align: left;
		white-space: nowrap;
		line-height: 33rpx;
		margin-top: 19rpx;
	}

	.image-text_2 {
		width: 174rpx;
		height: 27rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 49rpx 0 0 289rpx;
	}

	.label_1 {
		width: 27rpx;
		height: 25rpx;
		margin-top: 2rpx;
	}

	.text-group_2 {
		width: 138rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(124, 29, 255, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 33rpx;
	}

	.block_4 {
		width: 469rpx;
		height: 366rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0 0 0;
	}

	.block_5 {
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.100000);
		background-color: rgba(255, 255, 255, 1.000000);
		width: 230rpx;
		height: 320rpx;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.block_5_5 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
	}

	.image_3 {
		width: 179rpx;
		height: 90rpx;
	}

	.text-group_3 {
		width: 217rpx;
		height: 74rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 69rpx 0 0 7rpx;
	}

	.text_2 {
		width: 214rpx;
		height: 46rpx;
		overflow-wrap: break-word;
		color: rgba(50, 50, 50, 1);
		font-size: 22rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		line-height: 24rpx;
		margin-left: 3rpx;
	}

	.text_3 {
		width: 56rpx;
		height: 16rpx;
		overflow-wrap: break-word;
		color: rgba(233, 52, 59, 1);
		font-size: 20rpx;
		font-family: DIN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin-top: 12rpx;
	}

	.group_2 {
		width: 182rpx;
		height: 30rpx;
		flex-direction: row;
		display: flex;
		margin: 17rpx 0 0rpx 10rpx;
		font-size: 18rpx;
	}

	.text-wrapper_1 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 5rpx;
		height: 30rpx;
		border: 1px solid rgba(27, 27, 27, 1);
		display: flex;
		flex-direction: column;
		width: 30rpx;
	}

	.text_4 {
		width: 21rpx;
		height: 14rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 18rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 18rpx;
		margin: 5rpx 0 0 3rpx;
	}

	.text_5 {
		width: 18rpx;
		height: 16rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 18rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 18rpx;
		margin: 7rpx 0 0 6rpx;
	}

	.text-wrapper_2 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 5rpx;
		height: 30rpx;
		border: 1px solid rgba(27, 27, 27, 1);
		margin-left: 7rpx;
		display: flex;
		flex-direction: column;
		width: 30rpx;
	}

	.text_6 {
		width: 21rpx;
		height: 14rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 18rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 18rpx;
		margin: 5rpx 0 0 2rpx;
	}

	.text_7 {
		width: 17rpx;
		height: 17rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 18rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 18rpx;
		margin: 6rpx 0 0 9rpx;
	}

	.text-wrapper_3 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 5rpx;
		height: 30rpx;
		border: 1px solid rgba(27, 27, 27, 1);
		margin-left: 8rpx;
		display: flex;
		flex-direction: column;
		width: 30rpx;
	}

	.text_8 {
		width: 20rpx;
		height: 14rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 18rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 18rpx;
		margin: 5rpx 0 0 3rpx;
	}

	.text_9 {
		width: 18rpx;
		height: 17rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 18rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 18rpx;
		margin: 6rpx 0 0 9rpx;
	}


	.image-text_3 {
		width: 178rpx;
		height: 26rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 50rpx 0 0 292rpx;
	}

	.label_2 {
		width: 27rpx;
		height: 25rpx;
		margin-top: 1rpx;
	}

	.text-group_5 {
		width: 142rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(124, 29, 255, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 32rpx;
	}

	.block_8 {
		width: 690rpx;
		height: 237rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 28rpx 0 0 30rpx;
	}

	.image-wrapper_2 {
		background-color: rgba(249, 249, 249, 1.000000);
		border-radius: 5rpx;
		height: 236rpx;
		display: flex;
		width: 236rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.image_5 {
		width: 179rpx;
		height: 90rpx;
	}

	.block_9_9 {
		width: 435rpx;
		height: auto;
		margin-top: 9rpx;
		display: flex;
		flex-direction: column;
	}

	.block_9 {
		width: 435rpx;
		height: 228rpx;
		margin-top: 9rpx;
		display: flex;
		flex-direction: column;
	}

	.paragraph_1 {
		width: 416rpx;
		height: 60rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		line-height: 48rpx;
		margin-left: 7rpx;
	}

	.image-text_4 {
		width: 149rpx;
		height: 24rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 36rpx 0 0 4rpx;
	}

	.icon_3 {
		width: 30rpx;
		height: 24rpx;
	}

	.text-group_6 {
		width: 109rpx;
		height: 22rpx;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 22rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
	}

	.section_1 {
		width: 435rpx;
		height: 74rpx;
		margin-top: 20rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
	}

	.group_3 {
		width: 150rpx;
		height: 74rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.group_4 {
		width: 140rpx;
		height: 30rpx;
		flex-direction: row;
		display: flex;
		font-size: 18rpx;
	}

	.text-wrapper_7 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 5rpx;
		height: 30rpx;
		border: 1px solid rgba(27, 27, 27, 1);
		display: flex;
		flex-direction: column;
		width: 30rpx;
	}

	.text_18 {
		width: 21rpx;
		height: 14rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 18rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 18rpx;
		margin: 5rpx 0 0 3rpx;
	}

	.text_19 {
		width: 18rpx;
		height: 16rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 18rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 18rpx;
		margin: 5rpx 0 0 3rpx;
	}

	.text-wrapper_8 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 5rpx;
		height: 30rpx;
		border: 1px solid rgba(27, 27, 27, 1);
		margin-left: 7rpx;
		display: flex;
		flex-direction: column;
		width: 30rpx;
	}

	.text_20 {
		width: 21rpx;
		height: 14rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 18rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 18rpx;
		margin: 5rpx 0 0 3rpx;
	}

	.text_21 {
		width: 17rpx;
		height: 17rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 18rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 18rpx;
		margin: 5rpx 0 0 8rpx;
	}

	.text-wrapper_9 {
		width: 102rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 18rpx;
		margin-top: 20rpx;
	}

	.text_22 {
		width: 102rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(233, 52, 59, 1);
		font-size: 32rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 18rpx;
	}

	.text_23 {
		width: 102rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(233, 52, 59, 1);
		font-size: 32rpx;
		font-family: DIN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 18rpx;
	}

	.text-wrapper_10 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 5rpx;
		height: 30rpx;
		border: 1px solid rgba(27, 27, 27, 1);
		margin-left: 5rpx;
		display: flex;
		flex-direction: column;
		width: 30rpx;
	}

	.text_24 {
		width: 20rpx;
		height: 14rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 18rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 18rpx;
		margin: 5rpx 0 0 3rpx;
	}

	.text_25 {
		width: 18rpx;
		height: 17rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 18rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 18rpx;
		margin: 5rpx 0 0 3rpx;
	}

	.button_1 {
		height: 60rpx;
		// background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/942d95759b879a34468c2a19c1575ced5326c6fc.png') 100% no-repeat;
		// background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		width: 174rpx;
		margin: 13rpx 0 0 79rpx;
		background: linear-gradient(90deg, #3E218C, #4638BE);
		border-radius: 30rpx;
	}

	.text_26 {
		width: 112rpx;
		height: 27rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
		margin: 17rpx 0 0 30rpx;
	}
</style>